<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./project1/node_modules/vue/dist/vue.js"></script>
  <style>
    [v-clock] {
      opacity: 0;
    }
  </style>
</head>

<body>
  <div id="app" v-clock>
    {{name}}
  </div>
</body>

</html>
<script scr=''>
  function defineProperty(target, k, value) {
    if (typeof value == 'object') {
      value = {
        ...value
      }
      setP(value, value)
    }
    Object.defineProperty(target, k, {
      get() {
        return value
      },
      set(newV) {
        value = newV
      }
    })
  }
  let obj = {
    a: 123,
    b: 345,
    c: {
      t: 111
    }
  }
  let obj2 = {}

  function setP(obj, target) {
    for (let k in obj) {
      defineProperty(target, k, obj[k])
    }
  }
  setP(obj, obj2)



  let obj3 = new Proxy(obj, {
    // target就是我们代理的那个对象
    get(target, k) {
      console.log('get:', target, k)
      // return 99
      return target[k]
    },
    set(target, k, v) {
      console.log('set:', target, k, v)
      target[k] = v
    }
  })
</script>
<script>
  setTimeout(() => {
    let vm = new Vue({
      el: '#app',
      // template: "<h1>hahaha{{qq}}</h1>",
      data: {
        name: 6666
      }
    })
  }, 2000);
</script>